<template>
    <div class="wkb-footer-f1">
        <div @click="toHome()">
            <img v-if="$route.path=='/Home'" src="@/assets/index2.gif" />
            <img v-else src="@/assets/index1.gif">
            <span :class="$route.path=='/Home'? 'active':''">主页</span>
        </div>
        <div @click="toInitiate()">
            <img src="@/assets/ck1.gif" />
            <span>我要筹款</span>
        </div>
        <div class="active" @click="toMy()">
            <img v-if="$route.path=='/'" src="@/assets/home2.gif" />
            <img v-else src="@/assets/home1.gif">
            <span :class="$route.path=='/'? 'active':''">个人中心</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "bottom",
    props: {
        // msg: String
    },
    methods: {
        toHome() {
            if (this.$route.path == "/Home") {
                return;
            }
            this.$router.push({ path: "/Home" });
        },
        toInitiate() {
            this.$router.push({ path: "/Initiate" });
        },
        toMy() {
            if (this.$route.path == "/") {
                return;
            }
            this.$router.push({ path: "/" });
        }
    }
};
</script>
<style scoped>
.wkb-footer-f1 {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 52px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
}
.wkb-footer-f1 div {
    flex: 1;
    height: 52px;
    box-sizing: border-box;
    /* padding-top: 8px; */
    font-family: PingFangSC-Regular;
    font-size: 12px;
    line-height: 14px;
    color: rgba(0, 0, 0, 0.56);
    display: flex;
    align-items: center;
    justify-content: center;
     flex-direction: column;
}
.wkb-footer-f1 div img {
    width: 24px;
    height: 22px;
    margin-bottom: 2px;
}
.active{
    color: #FF5E10;
}
</style>
